<template>
  <div class="media-container">
    <template v-for="(fileType,index) in fileTypeList">
      <div class="media-box" :key="index" v-if="verifyDocType(fileType)">
        <ul>
          <template v-for="(item,index) in data">
            <li class="media-item" :key="index" v-if="item.fileType===fileType">
              <em>
                <a target="_blank">
                  <img :src="getIcon(fileType)" alt width="30px;" height="30px">
                </a>
              </em>
              <a target="_blank" :title="item.name" style="line-height:30px;" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.belongGroup)">{{(item.showName===null || item.showName==="")?item.displayName:item.showName}}</a>
              <span>--{{item.name}}</span>
              <a target="_blank" class="file-download el-icon-download" @click="handleFileDown($event,item.rowkey,item.objectUri,item.displayName,item.showName)"></a>
            </li>
          </template>
        </ul>
      </div>
    </template>
    <div>
    </div>
  </div>
</template>
<script>
import { getAssociationAttr } from '@/api/archives'
import imgIcon from '@/assets/file-ico/ico-img.png'
import mp3Icon from '@/assets/file-ico/ico-mp3.png'
import mp4Icon from '@/assets/file-ico/ico-mp4.png'
import othersIcon from '@/assets/file-ico/ico-others.png'
export default {
    data () {
        return {
            fileTypeList: ['img', 'mp3', 'mp4', 'others']
        }
    },
    props: {
        data: Array
    },
    methods: {
    // 下载文件
        async   handleFileDown (event, rowkey, objectUri, displayName, showName) {
            event.preventDefault()
            let fileName = showName || displayName
            let data = await getAssociationAttr({ rowkey: rowkey, objectUri: objectUri })
            let proList = data.propertyList
            for (let item of proList) {
                if (item.propertyUri === 'com.scistor.property.orignaldata') {
                    var encodedUri = encodeURI(item.propertyValues[0].value + '?n=' + fileName)// encodeURI识别转义符
                    var link = document.createElement('a')
                    link.setAttribute('href', encodedUri)
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                }
            }
        },
        getIcon (type) {
            let icon = {
                'img': imgIcon,
                'mp3': mp3Icon,
                'mp4': mp4Icon,
                'other': othersIcon
            }
            return icon[type]
        },
        verifyDocType (type) {
            let hasType = false
            for (let item of this.data) {
                if (item.fileType == type) {
                    hasType = true
                    break
                }
            }
            return hasType
        },
        viewObjectInfo (objectType, instanceUri, objectUri, name, displayName, icon, belongGroup) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            window.open(currentUrl, '')
        }
    }
}
</script>
<style lang="less" scoped>
.media-container {
  height: 500px;
  padding: 10px;
  overflow-y: auto;
  .media-box {
    display: flex;
    .media-item {
      margin-bottom: 10px;
    }
    .file-img-container {
      justify-content: center;
      align-self: center;
    }
    .file-download {
      margin-left: 15px;
      font-size: 20px;
    }
  }
}
</style>
